<template>
	<div class="order-detail-container">
		<!-- 商品列表 -->
		<div class="goods-list">
			<van-card v-for="item in order.detailList" :key="item.id" :num="item.count" :price="item.price"
				:title="item.product_name" :desc="item.product_spec" :thumb="`${APIDomainName}${item.product_pic}`"
				class="goods-card" />
		</div>

		<!-- 订单备注 -->
		<van-cell title="订单备注" :value="order.remark" label="" class="order-remark-cell" />

		<!-- 配送信息 -->
		<van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" class="delivery-info-cell" />
		<!-- 收货地址 -->
		<van-cell title="收货地址" class="shipping-address-cell">
			<template #label>
				<div>{{ order.receiver }} {{ order.phone }}</div>
				<div>{{ order.address }}</div>
			</template>
		</van-cell>

		<!-- 费用信息 -->
		<div class="fee-info">
			<van-cell title="商品金额" :value="`¥${orderAmount}`" class="fee-cell" />
			<van-cell title="运费" :value="`¥0.00`" class="fee-cell" />
			<van-cell title="总价" :value="`¥${orderAmount}`" class="fee-cell" />
		</div>

		<!-- 去支付按钮 -->
		<div v-if="order.id && order.status === 0" class="payment-button-container">
			<van-button type="primary" size="large" @click="onClickPay" class="payment-button">去支付</van-button>
		</div>
		<!-- 删除按钮 -->
		<div v-if="order.id" class="delete-button-container">
			<van-button type="danger" size="large" @click="onClickDelete" class="delete-button">删除订单</van-button>
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant';
	import {
		getOrderDetailByIdAPI,
		deleteOrderByIdAPI
	} from "@/api/order.js";

	export default {
		data() {
			return {
				order: {
					detailList: []
				},
			};
		},
		props: ["id"],
		computed: {
			// 计算一个订单的总金额
			orderAmount() {
				let amount = 0;
				this.order.detailList.forEach(item => {
					amount += item.count * item.price;
				});
				return amount.toFixed(2);
			},
		},
		// 生命周期钩子函数
		created() {
			this.getOrder();
		},
		methods: {
			// 获取订单详情
			getOrder() {
				getOrderDetailByIdAPI(this.id).then(result => {
					this.order = result.data;
				});
			},
			// 触发支付
			onClickPay() {
				showToast('还未实现....');
			},

			// 触发删除订单
			onClickDelete() {
				deleteOrderByIdAPI(this.id).then(() => {
					showToast("订单已删除");
					setTimeout(() => {
						this.$router.back();
					}, 1000);
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	@bg-color: #f8f8f8;
	@card-bg-color: #fff;
	@primary-color: #007bff;
	@danger-color: #dc3545;
	@text-color: #333;
	@secondary-text-color: #666;

	.order-detail-container {
		background-color: @bg-color;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

		.goods-list {
			margin-bottom: 15px;

			.goods-card {
				margin: 10px 0;
				border-radius: 10px;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
				background-color: @card-bg-color;

				.van-card__content {
					justify-content: space-evenly;
				}

				.van-card__title {
					font-size: 16px;
					color: @text-color;
				}

				.van-card__num {
					font-size: 14px;
					color: @text-color;
				}
			}
		}

		.order-remark-cell,
		.delivery-info-cell,
		.shipping-address-cell,
		.fee-cell {
			background-color: @card-bg-color;
			border-radius: 10px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			margin-bottom: 10px;
			color: @text-color;
		}

		.fee-info {
			margin-bottom: 15px;
		}

		.payment-button-container,
		.delete-button-container {
			text-align: center;
			margin-bottom: 10px;
		}

		.payment-button {
			background-color: @primary-color;
			border-radius: 5px;
			transition: background-color 0.3s ease;

			&:hover {
				background-color: darken(@primary-color, 10%);
			}
		}

		.delete-button {
			background-color: @danger-color;
			border-radius: 5px;
			transition: background-color 0.3s ease;

			&:hover {
				background-color: darken(@danger-color, 10%);
			}
		}
	}
</style>